import React, { Component } from "react";

class App extends Component {
  state = {
    value: "阿萨啊",
    checked: true,
  };
  render() {
    return (
      <div>
        {/* 你给表单字段提供了一个没有onChange处理程序的“value”道具。这将呈现一个只读字段。如果字段是可变的，请使用' defaultValue '。否则，设置' onChange '或' readOnly '。 */}

        {/* 注：使用表单时，有value值就尽量加上 onChange事件 */}
        {/* 只读 */}
        <input type="text" value={this.state.value} readOnly />
        {/* 夹上 defaultValue 用户就可以更改输入的内容 */}
        <input type="text" defaultValue={this.state.value} />
        <input type="checkbox" defaultValue={this.state.checked} />

        {/* 
        在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。
下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）
        */}
        <input type="text" value={null} />
      </div>
    );
  }
}

export default App;
